<template>
  <div class="planelmg-content">
    <div class="content-box">
      <div class="box-heard padding-15">
        <custom-title title="平面图">
          <template v-slot:utils>
            <el-button @click="planeOpen(dict.type.projectpointpic_type[0].value)" class="btn_primary"
              icon="el-icon-plus">
              新增
            </el-button>
          </template>
        </custom-title>
      </div>
      <div class="box-body" style="min-height: 317px;">
        <PlaneBox ref="planeBox" @deleteId="deleteIdHandle" />
      </div>
    </div>
    <div class="content-box padding-15">
      <div class="box-heard">
        <custom-title title="实景图">
          <template v-slot:utils>
            <el-button @click="realOpen(dict.type.projectpointpic_type[1].value)" class="btn_primary" icon="el-icon-plus">
              新增
            </el-button>
          </template>
        </custom-title>
      </div>
      <div class="box-body" style="min-height: 317px;">
        <PlaneBox ref="planeBox2" @deleteId="deleteIdHandle" />
        <!-- <base-images :imgList="realImageArr" fit="cover"></base-images> -->
      </div>
    </div>
    <!-- <div slot="footer" class="dialog-footer"
            style="display: flex;justify-content: flex-end;align-items: center;width: 100%;">
            <el-button class="btn_cancel" @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="fn()" class="btn_primary">确 定</el-button>
        </div> -->
    <PlaneImgDialog ref="dialog" :name="projectName" @initImgList="initImg" @Lowercancel="Lowercancel"></PlaneImgDialog>
  </div>
</template>

<script>
import PlaneImgDialog from "./PlaneImgDialog.vue";
import PlaneBox from './PlaneBox';
import { addProjectPointPic, updateProjectPointPic, delProjectPointPic, getProjectPointPic, getProjectPointPicList, getCommonConfig } from "@/api"
export default {
  components: {
    PlaneImgDialog,
    PlaneBox
  },
  // 引入字典
  dicts: ["projectpointpic_type"],
  props: {
    projectPointInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      // 图片类型id
      imageTypeid: undefined,
      //平面图地址
      planeImageArr: [
      ],
      // 实景图地址
      realImageArr: [
      ],
      projectName: '',
    };
  },
  computed: {},
  watch: {
    projectPointInfo: {
      handler(val) {
        console.log(val, 'watch')

        this.initImg()
      },
      immediate: true
    },
  },
  created() {
    this.projectName = this.projectPointInfo.projectPointName
    console.log(this.projectName, 'watch name')
  },
  methods: {
    show(data) {
      console.log('平面图', data)
    },
    deleteIdHandle(val) {
      console.log(val)
      this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProjectPointPic([val]).then(res => {
          if (200 === res.code) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.initImg()
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 根据类型渲染对应图片
    async initImg() {
      const planeImageList = await this.initImgList(1)
      const planeImageList2 = await this.initImgList(2)
      this.$refs.planeBox.planeShow(planeImageList.rows)
      this.$refs.planeBox2.planeShow(planeImageList2.rows)
    },
    // 渲染图片列表
    initImgList(type) {
      const projectPointId = this.projectPointInfo.projectPointId
      const params = {
        projectPointId: projectPointId,
        picType: type
      }
      return getProjectPointPicList(params)
      // if (projectPointId) {
      //   this.realImageArr = []
      //   for (const item of imgArr) {
      //     getProjectPointPicList(item).then(res => {
      //       if (item.picType == 1) {
      //         for (const item of res.rows) {
      //           this.planeImageArr.push({
      //             projectPointPicId: [item.projectPointPicId],
      //             src: [item.picUrl]
      //           })
      //         }
      //       } else {
      //         for (const item of res.rows) {
      //           this.realImageArr.push({
      //             src: [item.picUrl]
      //           })
      //         }
      //       }
      //     })
      //   }
      // }
    },

    // 新增平面图
    planeOpen(imageTypeid) {
      console.log(this.projectPointInfo.projectPointId, imageTypeid, 'add show res')
      this.isVisible = true
      this.$refs.dialog.show(this.projectPointInfo.projectPointId, imageTypeid)
    },
    // 新增实景图
    realOpen(imageTypeid) {
      this.isVisible = true
      this.$refs.dialog.show(this.projectPointInfo.projectPointId, imageTypeid)
    },
    // 弹窗新增编辑-取消
    Lowercancel() {
      this.isVisible = false;
    },
    // 关闭弹窗
    cancel() {
      this.$emit('cancel');
    },
    handleSubmit() {
      this.$emit('cancel')
    }
  },
  mounted() {

  },
}
</script>

<style lang='less' scoped>
/deep/ .baseimages_container .imgs_box {
  width: 366px;
  height: 235px;
  // min-width: 366px;
  // min-height: 235px;
  box-sizing: border-box;
}

.box-body {
  height: 317px;
  overflow: auto;
}
</style>